<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>My-Own</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/own.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
	</head>

	<body class="own-gray-color">
		<header class="mui-bar mui-bar-nav">
			<a id="header-icon-back" class="mui-icon-back mui-icon"></a>
			<a id="header-icon-search" class="mui-icon-search mui-icon mui-pull-right"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<div class="mui-content">

		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="tab_home" href="home/home.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" id="tab_cart" href="cart/cart.html">
				<span class="mui-icon iconfont icon-cart"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" id="tab_discover" href="discover/discover.html">
				<span class="mui-icon iconfont icon-faxian"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" id="tab_mine" href="mine/mine.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
	</body>
	<script type="text/javascript" charset="utf-8">
		var webviews = [];
		var subpages = ['home/home.html', 'cart/cart.html', 'discover/discover.html', 'mine/mine.html'];
		var activeTab = subpages[0];

		mui.init();

		mui.plusReady(function() {
			plus.webview.currentWebview().opener().close("none");
			//			mui.toast('欢迎回来' + localStorage.getItem('st_user_name') + '！')
			mui.toast('欢迎回来' + localStorage.getItem('st_user_name') + '！', {
				duration: 'short',
				type: 'div'
			})

			initView();
			initClick();
			initTabs1();

			function initView() {
				plus.screen.lockOrientation("portrait-primary"); //锁定竖屏显示
				plus.navigator.setStatusBarBackground("#41cea9");
			}

			function initClick() {
				mui(document.body).on('tap', '#header-icon-back', function() {
					mui.back()
				})
				mui(document.body).on('tap', '#header-icon-search', function() {
					mui.toast('去搜索')
				})
			}

			function initTabs1() {
				//添加首页home.html
				for(var i = 0; i < subpages.length; i++) {
					var item = plus.webview.create(subpages[i], subpages[i], {
						top: '45px',
						bottom: '50px'
					});
					item.hide();
					webviews[i] = item;
					plus.webview.currentWebview().append(item);
				}
				webviews[0].show();

				//选项卡点击事件
				mui('.mui-bar-tab').on('tap', 'a', function() {
					var targetTab = this.getAttribute('href');
					if(targetTab == activeTab)
						return
					if(mui.os.plus) {
						plus.webview.show(targetTab);
						plus.webview.hide(activeTab);
						activeTab = targetTab;
					} else {
						createIframe('.mui-content', {
							url: targetTab,
							style: {
								top: '45px',
								bottom: '50px'
							}
						})
					}
				})
			}

			function createIframe(el, opt) {
				var elContainer = document.querySelector('.mui-content');
				var wrapper = document.querySelector('.mui-iframe-wrapper');
				if(!wrapper) {
					wrapper = document.createElement('div');
					wrapper.className = 'mui-iframe-wrapper';
					for(var i in opt.style) {
						wrapper[i] = opt.style[i];
					}
				}
				var iframe = document.createElement('iframe');
				iframe.src = opt.url;
				iframe.id = opt.id || opt.url;
				iframe.name = opt.id;
				wrapper.appendChild(iframe);
				elContainer.appendChild(wrapper);
			}

			//两次点击返回
			var first = null;
			mui.back = function() {
				//首次按键
				if(!first) {
					first = new Date().getTime();
					mui.toast("再按一次退出");
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			}

		});
	</script>

</html>